<template>
  <div class="content">
    <h2>消息提示</h2>
    <h3>基础用法</h3>
    <el-button @click="open">show message</el-button>
    <h3>不同状态</h3>
    <el-row>
      <el-col :span="3">
        <el-button :plain="true" @click="openType('success')">success</el-button>
      </el-col>
      <el-col :span="3">
        <el-button :plain="true" @click="openType('warning')">warning</el-button>
      </el-col>
      <el-col :span="3">
        <el-button :plain="true" @click="openType('info')">message</el-button>
      </el-col>
      <el-col :span="3  ">
        <el-button :plain="true" @click="openType('error')">error</el-button>
      </el-col>
    </el-row>
    <br /><hr>
    <h2>MessageBox 弹框</h2>
    <h3>消息提示</h3>
    <el-button @click="openMessageBox">打开消息提示框</el-button>
    <h3>Confirm 弹框</h3>
    <el-button @click="openMessageConfirm">打开消息提示框</el-button>
  </div>
</template>
<script>
import message from '@/components/message.js';
export default {
  setup(){

    const open = () => {
      message.info('this is a message');
    }
    // 打开message
    const openType = (type) => {
      message[type](type);
    }

    // 打开消息提示框
    const openMessageBox = () => {
      // message.alert({})
      message.alert({title: 'this is title', msg: 'this is msg', ok: null, okText: 'this is okText'})
    }

    // 打开消息提示确认框
    const openMessageConfirm = () => {
      message.confirm({title: 'this is title', msg: 'this is msg', ok: null, okText: 'this is okText'})
    }

    return {
      open,
      openType,
      openMessageBox,
      openMessageConfirm
    }
  }
}
</script>